
// 设置加号事件
function onPlus() {
    var plusEles = document.querySelectorAll('input[name="plus"]')
    for (var i = 0; i < plusEles.length; i++) {
        //  点击加号的绑定事件
        plusEles[i].onclick = function () {
            //设置上一个兄弟元素节点的属性
            var amountEles = this.previousElementSibling //获取数量元素
            amountEles.value++
            //给加号消除禁用
            var minus = amountEles.previousElementSibling
            minus.removeAttribute('disabled')

            //计算价格

            // 1 获取单价
            var priceEle = this.parentElement.previousElementSibling //获取单价元素
            var price = priceEle.innerHTML //获取 单价元素里面的￥28.90 
            price = price.substring(1) //对索引为1的字符串开始进行截取，截取后仍然是字符串类型
            price = Number(price) //字符串转数值
            // console.log(price);


            //2. 获取数量
            var num = amountEles.value //获取num=数量值

            // 3.计算总价
            var totalPrice = price * num
            totalPrice = totalPrice.toFixed(2)
            // console.log(totalPrice);  //调试用

            // 4.显示总价到对应位置 
            var totalPices = this.parentElement.nextElementSibling //获取单价栏元素 名字设为totalPices
            // totalPices.innerHTML = '￥'+totalPrice  // 字符串拼接 法一
            totalPices.innerHTML = `￥${totalPrice}` // 模板字符串拼接 法二

            // 计算商品总价
            var goodsTotalPrice = getSum() // 调用回调函数
            var goodsTotal = document.querySelector('.total-price span') //获取span价格模块
            goodsTotal.innerHTML = `￥${goodsTotalPrice}` //向span模块添加内容：调用函数的sum
        }
    }
}

onPlus()

// 设置减号事件
function onMinus() {
    var minusEles = document.querySelectorAll('input[name="minus"]')
    for (var i = 0; i < minusEles.length; i++) {
        //  点击减号的绑定事件
        minusEles[i].onclick = function () {
            //设置下一个兄弟元素节点的属性
            var amountEles = this.nextElementSibling
            amountEles.value--
            if (amountEles.value == 0) {
                this.setAttribute('disabled', true) //设置禁用
            }

            //计算价格

            // 1 获取单价
            var priceEle = this.parentElement.previousElementSibling //获取单价元素
            var price = priceEle.innerHTML //获取 单价元素里面的￥28.90 
            price = price.substring(1) //对索引为1的字符串开始进行截取，截取后仍然是字符串类型
            price = Number(price) //字符串转数值

            //2. 获取数量
            //  var  amountEles = this.nextElementSibling  //       这句话可以不用写了，上面写了，如果上面没写 要写这句话、
            var num = amountEles.value //获取num=数量值
            // 3.计算总价
            var totalPrice = price * num
            totalPrice = totalPrice.toFixed(2)
            // console.log(totalPrice);  //调试用
            // 4.显示总价到对应位置 
            var totalPices = this.parentElement.nextElementSibling //获取单价栏元素 名字设为totalPices
            // totalPices.innerHTML = '￥'+totalPrice  // 字符串拼接 法一
            totalPices.innerHTML = `￥${totalPrice}` // 模板字符串拼接 法二

            // 计算商品总价

            var goodsTotalPrice = getSum() // 调用回调函数
            var goodsTotal = document.querySelector('.total-price span') //获取span价格模块

            goodsTotal.innerHTML = `￥${goodsTotalPrice}` //向span模块添加内容：调用函数的sum
        }
    }

}

onMinus()
//  * 计算所有商品总价
function getSum() {

    var sum = 0
    var goodsTotalPriceEle = document.querySelectorAll('.all-price') //获取每个商品的总价格 定义名字为goodsTotalPriceEle
    for (var i = 0; i < goodsTotalPriceEle.length; i++) {
        var price = goodsTotalPriceEle[i].innerHTML
        price = price.substring(1) //截取价格，截取后仍是字符串
        // price = Number(price) //字符串转数值
        sum += Number(price) //累加
    }
    return sum.toFixed(2) //回调函数
}

//删除
var deleteEles = document.querySelectorAll('.delete') //获取deleteEles
for (var i = 0; i < deleteEles.length; i++) {
    deleteEles[i].onclick = function () {
        this.parentElement.parentElement.remove() //删除tr  节点.remove()
    }
}


//   获取购物车

// ---------------------------------------------------------------------------------

